
<template>
    <div class="threeJsPrc31">
      <canvas ref="myCanvas"></canvas>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as Three from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
@Options({ components: {
} })
export default class ThreeJsPrc31 extends Vue {
  public rect!: DOMRect;
  public scene!:  Three.Scene ;
  public sphere!: Three.SphereGeometry;
  public sphere1!: Three.SphereGeometry;
  public sphere2!: Three.SphereGeometry;
  public sphere3!: Three.SphereGeometry;

  public material!: Three.PointsMaterial;
  public material1!: Three.LineBasicMaterial;
  public material2!: Three.LineDashedMaterial;
  public material3!: Three.MeshBasicMaterial;

  public ponit!: Three.Points;
  public line!: Three.Line;
  public line1!: Three.Line;
  public mesh!: Three.Mesh;
  public camera!: Three.PerspectiveCamera;
  public renderer!: Three.WebGLRenderer;
  public t0!: Date;
  public t1!: Date;
  public t!: number;
  public controls!: OrbitControls;
  public axisHelper!: THREE.AxesHelper;


  public draw() {
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(() => {
      this.draw();
    });
  }
  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    this.scene = new Three.Scene();
    // 1
    this.sphere = new Three.SphereGeometry(30, 40, 40);
    this.material = new Three.PointsMaterial({
      color: 0x0000ff,
      size: 2,
    });
    this.ponit = new Three.Points(this.sphere, this.material);
    this.ponit.translateY(120);
    this.scene.add(this.ponit);
    // 2
    this.sphere1 = new Three.SphereGeometry(30, 40, 40);
    this.material1 = new Three.LineBasicMaterial({
      color: 0x0000ff,
    });
    this.line = new Three.Line(this.sphere1, this.material1);
    this.line.translateY(-120);
    this.scene.add(this.line);
    // 3
    this.sphere2 = new Three.SphereGeometry(30, 40, 40);
    this.material2 = new Three.LineDashedMaterial({
      color: 0x0000ff,
      dashSize: 10, // 显示线段的大小。默认为3。
      gapSize: 5, // 间隙的大小。默认为1
    });
    this.line1 = new Three.Line(this.sphere2, this.material2);
    this.line1.translateX(120);
    this.scene.add(this.line1);
    // 4
    this.sphere3 = new Three.SphereGeometry(30, 40, 40);
    this.material3 = new Three.MeshBasicMaterial({
      color: 0x0000ff,
    });
    this.mesh = new Three.Mesh(this.sphere3, this.material3);
    this.mesh.translateX(-120);
    this.scene.add(this.mesh);

    this.axisHelper = new Three.AxesHelper(250);
    this.scene.add(this.axisHelper);
    const point = new Three.PointLight(0xffffff);
    point.position.set(200, 200, 300);
    this.scene.add(point);
    const ambient = new Three.AmbientLight(0x4444);
    this.scene.add(ambient);


    // 相机
    this.camera = new Three.PerspectiveCamera(70, this.rect.width / this.rect.height, 1, 10000);
    this.camera.position.set(200, 100, 200);
    this.camera.lookAt(this.scene.position);

    // 渲染器
    const myCanvas = this.$refs.myCanvas as HTMLCanvasElement;
    this.renderer = new Three.WebGLRenderer({ canvas: myCanvas });
    this.renderer.setSize(this.rect.width, this.rect.height);
    this.renderer.setClearColor(0xb9d3ff, 1);

    this.t0 = new Date();
    this.draw();
    this.controls = new OrbitControls(this.camera, myCanvas);
  }
}
</script>

<style lang="postcss" scoped>
.threeJsPrc31{
  touch-action: none;
  width: 100%;
  height: 100%;
  background: grey;
}
</style>
